<template>
  <div class="wallpaper_box">
    <div style="height: 1.6rem"></div>
    <!-- 头部 -->
    <div class="header">
      {{ title }}
    </div>
        <!-- 首页组件 -->
        <List v-if="title == '首页'"></List>
        <!-- 分类组件 -->
        <Cate v-show="title == '分类'"></Cate>
        <!-- 我的组件 -->
        <My v-if="title == '我的'"></My>
    <!-- 底部 -->
    <div class="bottom">
      <i
        @click="switchTo(1)"
        :class="{ i_a: title == '首页', i_b: title != '首页' }"
        class="iconfont icon-zhuye"
      ></i>
      <i
        @click="switchTo(2)"
        :class="{ i_a: title == '分类', i_b: title != '分类' }"
        class="iconfont icon-icon"
      ></i>
      <i
        @click="switchTo(3)"
        :class="{ i_a: title == '我的', i_b: title != '我的' }"
        class="iconfont icon-wode"
      ></i>
    </div>
    <!-- 切换页面加载动画 -->
    <div class="fakeloader"></div>
  </div>
</template>

<script>
import List from "@/components/list/List.vue";
import Cate from "@/components/cate/Cate.vue";
import My from "@/components/my/My.vue";
export default {
  name: "Index",
  data() {
    return {
      title: "首页", 
    };
  },
  components: {
    List,
    Cate,
    My,
  },
  mounted() {
    // 判断登录状态以及获取当前所在页面
    console.log(sessionStorage.getItem("title"));
    if(sessionStorage.getItem("title")==null){
        this.title="首页";
    }else{
        this.title=sessionStorage.getItem("title")
    }
    const tk = localStorage.getItem("userName");
    if (!tk) {
      localStorage.love = []
    } else {
     
    }

    $(".fakeloader").fakeLoader({
      timeToHide: 500,
      bgColor: "#34495e",
      spinner: "spinner3",
    });
  },
  
  methods: {
    
    switchTo(i) {
      switch (i) {
        case 1:
          sessionStorage.setItem("title","首页")
          this.title = "首页";
          break;
        case 2:
          sessionStorage.setItem("title","分类")
          this.title = "分类";
          break;
        case 3:
          sessionStorage.setItem("title","我的")
          this.title = "我的";
          break;
      }
    },
  },
};
</script>

<style scoped>

.fade-enter-active, .fade-leave-active {
  transition: opacity 3s;
}
.kz {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
}
.wallpaper_box {
  background-color: #39434f;
  padding-bottom: 1.6rem;
  height: 100%;
  overflow: auto;
}
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #39434f;
}
.header {
  width: 100%;
  line-height: 1.5rem;
  background-color: #414a54;
  position: fixed;
  font-size: 0.45rem;
  top: 0;
  transition: 0.8s;
  text-align: center;
  color: white;
  z-index: 999;
}
img {
  width: 100%;
  height: 5.5rem;
  margin-bottom: 0.1rem;
  transition: 0.8s;
  border-radius: 0.3rem;
}
.bottom {
  width: 100%;
  line-height: 1.5rem;
  z-index: 999;
  position: fixed;
  background-color: #414a54;
  /* transition: 0.3s; */
  color: white;
  bottom: 0;
  display: flex;
  /*justify-content: space-around;*/
}
.bottom i {
  font-size: 0.6rem;
  width: 33%;
  transition: 0.1s;
  text-align: center;
}

.i_a {
  color: white;
  font-size: 0.75rem !important;
}
.i_b {
  color: #929292;
}
</style>
